$(function(){


$.ajax({
    type:'get',
    url:'/admin/data/info',
    success:function(backData){
        $('.scolor00 em').text(backData.totalArticle)
        $('.scolor01 em').text(backData.dayArticle)
        $('.scolor02 em').text(backData.totalComment)
        $('.scolor03 em').text(backData.dayComment )
    }
})

$.ajax({
  type: 'get',
  url: '/admin/data/article',
  success: (backData) => {
   let dates=backData.date.map((item)=>item.date)
   let counts=backData.date.map((item)=>item.count)
   loadEchars(dates,counts)
  },
})
function loadEchars(dates,counts) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('curve_show'));

  

    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: '日新增文章数',
        },

        xAxis: {
            name: '日',
            type: 'category',
            boundaryGap: false,
            data: dates
        },
        legend: {
            data: ['新增文章'],
            top: '40'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            },
            right: 50
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
        },
        series: [
            {
                name: '新增文章',
                type: 'line',
                smooth: true,
                // symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    color: '#f80'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,136,0,0.39)'
                    }, {
                        offset: .34,
                        color: 'rgba(255,180,0,0.25)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(255,222,0,0.00)'
                    }])
                },
                data: counts
            }
        ],
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
$.ajax({
  type: 'get',
  url: '/admin/data/category',
  success: (backData) => {
    let name=backData.date.map((item)=>item.name)
    let articles=backData.date.map((item)=>item.articles)
  let arr=[]
  for(let i=0;i<backData.date.length;i++){    
    arr.push({value: backData.date[i].articles, name:backData.date[i].name}) 
}
yuan(name,arr)
  }
})
function  yuan(name,arr){
       // 基于准备好的dom，初始化echarts实例
       var myChart1 = echarts.init(document.getElementById('pie_show'));

       option1 = {
           title: {
               left: 'center',
               text: '分类文章数量比',
           },
           tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b}: {c} ({d}%)"
           },
           legend: {
               orient: 'horizontal',
               x: 'center',
               data: name,
               top: 30
           },
           color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
           series: [
               {
                   name: '分类名称',
                   type: 'pie',
                   radius: ['50%', '70%'],
                   avoidLabelOverlap: false,
                   label: {
                       emphasis: {
                           show: true,
                           textStyle: {
                               fontSize: '30',
                               fontWeight: 'bold'
                           }
                       }
                   },
                   data: arr
               }
           ]
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart1.setOption(option1);
}

$.ajax({
  type: 'get',
  url: '/admin/data/article',
  success: (backData) => {
      console.log(backData);
    let dates=backData.date.map((item)=>item.date)
    let counts=backData.date.map((item)=>item.count)
 
   zhu(dates,counts)
  },
})
function zhu(dates,counts){
    var myChart2 = echarts.init(document.getElementById('column_show'));

option2 = {
    title: {
        left: 'center',
        text: '分类访问量',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
        },
        
    },
    legend: {
        data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
        top:30
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data:dates
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
    series: [
        {
              data: counts,
                type: 'bar',
                barWidth: 25, // 设置柱子的宽度
                showBackground: true,
        },
      
    ]
};


// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
}
})